<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>注册账号</title>
		<!--引入jquery资源-->
		<script src="${basePath}static/add_resource/js/bootstrap-3.3.7-dist/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<!--引入bootstrap核心css-->
		<link rel="stylesheet" type="text/css" href="${basePath}static/add_resource/js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<!--引入bootstrap核心js-->
		<script src="${basePath}static/add_resource/js/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		function doAjaxQuery(){
			$.ajax({
				//请求类型
				type:"POST",
				//服务器url
				url:"${basePath }AjaxQueryAdmin",
				//发送的数据
				data:$("#myForm").serialize(),
				//responseText转换的数据类型为json对象类型
				 dataType:"json",
				//成功之后回调方法，方法的参数是服务器响应的内容也就是ajax引擎获取到responseText内容
				success: function(data){
					var strContent = "";
					if (data) {
						 $.each(data,function(index,ev){
							 strContent +="<tr>";
							 strContent +="<th>";
							 strContent +=(index+1);
							 strContent +="</th>";
							 
							 strContent +="<td>";
							 strContent +=ev.adminname;
							 strContent +="</td>";
							 
							 strContent +="<td>";
							 strContent +=ev.adminsex;
							 strContent +="</td>";
							 
							 strContent +="<td>";
							 strContent +=ev.adminage;
							 strContent +="</td>";
							 
							 strContent +="<td>";
							 strContent +=ev.admintel;
							 strContent +="</td>";
							 
							 strContent +="<td>";
							 strContent +=ev.adminemail;
							 strContent +="</td>";
							 
							 strContent +="<td>";
							 strContent +=ev.admincreatetime;
							 strContent +="</td>";
							 
							 strContent +="</tr>";
						 });				
					}
					 // 解析结果集完成之后，将需要显示的内容添加到dom控件中 （Ajax回调函数的局部刷新操作）
					 $("#querytbody").html(strContent);  
				}
			});
	}
		
		</script>
		
	</head>

	<body>
		<form class="form-horizontal" id="myForm">
			<div class="form-group">
			</div>
			<div class="form-group">
				<label for="txtName" class="col-sm-2 control-label">用户名</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="adminname" name="adminname" placeholder="请输入用户名">
				</div>
				<label for="txtEmail" class="col-sm-2 control-label">邮箱</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="adminemail" name="adminemail" placeholder="请输入邮箱">
				</div>
			</div>
			<div class="form-group">
				
				<label for="txtSex" class="col-sm-2 control-label">性别</label>
				<div class="col-sm-3">
					<label class="radio-inline">
  						<input type="radio" name="adminsex" id="adminsex1" value="男"> 男
					</label>
					<label class="radio-inline">
						<input type="radio" name="adminsex" id="adminsex2" value="女"> 女
					</label>
					<label class="radio-inline">
						<input type="radio" name="adminsex" id="adminsex3" value=""> 性别不限
					</label>					
				</div>
				<label for="txtName" class="col-sm-2 control-label">电话</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="admintel" name="admintel" placeholder="请输入电话">
				</div>
			</div>
			<div class="form-group">
				
				<label for="txtPsw" class="col-sm-2 control-label">年龄</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="adminage" name="adminage" placeholder="请输入年龄">
					<input type="text" class="form-control" id="adminage2" name="adminage2" placeholder="请输入年龄">
				</div>
				<label for="txtName" class="col-sm-2 control-label">创建日期</label>
				<div class="col-sm-3">
					<input type="date" class="form-control" id="admincreatetime" name="admincreatetime" placeholder="请输入创建时间">
					<input type="date" class="form-control" id="admincreatetime2" name="admincreatetime2" placeholder="请输入创建时间">
				</div>
			</div>
			
			<div class="form-group">
				<div class="col-sm-offset-4 col-sm-1">
					<button type="button" class="btn btn-default" onclick="doAjaxQuery();">提&nbsp;&nbsp;交</button>
				</div>
				<div class="col-sm-offset-1 col-sm-1">
					<button type="reset" class="btn btn-default">取&nbsp;&nbsp;消</button>
				</div>
			</div>
		</form>
<div class="bs-example" data-example-id="hoverable-table">
    <table class="table table-hover">
      <thead>
        <tr>
          
          <th>序号</th>
          <th>用户名</th>
           <th>性别</th>
          <th>年龄</th>
           <th>电话</th>
            <th>邮箱</th>
             <th>添加时间</th>
        </tr>
      </thead>
      <tbody id="querytbody">
        
      </tbody>
    </table>
  </div>
	</body>

</html>